<template>
  <footer
    class="footer"
    :class="[isShowWhite ? 'friend-link-white' : 'friend-link-black']"
  >
    <div class="footer-inner block-center">
      <div style="width: 1200px; margin: 0 auto 20px" class="flex-wrap">
        <!-- 最左侧 -->
        <div>
          <div
            :class="`${!isShowWhite ? 'web-logo-white' : 'web-logo-black'}`"
          ></div>
          <div
            :class="`${!isShowWhite ? 'slogan-white' : 'slogan-black'} mt15`"
          ></div>
          <!-- 底部备案号 -->
          <div class="footer-register-info">
            <div
              style="margin-top: 15px; max-width: 196px"
              class="reg-item zl-g9"
            >
              <div>
                Copyright &copy; 2016-
                <span class="site-year"></span>
                &nbsp;
                <span class="site-host"></span>
                All Rights Reserved.
              </div>
              <div class="site-name"></div>
              <div>
                <a
                  rel="nofollow"
                  href="http://beian.miit.gov.cn"
                  class="beiNumber"
                ></a>
              </div>
              <div class="wangwen"></div>
              <div>
                <a rel="nofollow" href="" class="gongan" target="_blank"></a>
              </div>
            </div>
          </div>
        </div>
        <!-- 新手指南 -->
        <div class="flex-wrap flex-justify-around flex1">
          <div
            style="max-width: 200px"
            v-for="(item, index) in footerNavs"
            :key="index"
          >
            <div class="f16 nav-title">{{ item.title }}</div>
            <div class="f14 mt20">
              <div
                class="mt10"
                v-for="(child, index) in item.children"
                :key="index"
              >
                <!-- 跳转链接 -->
                <a
                  target="_blank"
                  v-if="+child.type === 1"
                  :href="parseFullPath(child.content)"
                >
                  {{ child.title }}
                </a>
                <!-- 跳客服 -->
                <a
                  v-else-if="+child.type === 2"
                  href="javascript:;"
                  @click="show53Kefu"
                >
                  {{ child.title }}
                </a>
                <!-- 文案 -->
                <div v-else-if="+child.type === 3">
                  <a href="javascript:;">{{ child.title }}</a>
                  <a href="javascript:;">{{ child.content }}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- App与公众号二维码 -->
        <div class="ml70">
          <div class="f16 pl10 nav-title">{{ footerEwms.title }}</div>
          <div class="mt20 flex-wrap">
            <div
              class="qrcode"
              v-for="(item, index) in footerEwms.qrcodes"
              :key="index"
            >
              <div class="qrcode-box flex-center">
                <img
                  class="qrcode-img"
                  :src="parseResourceUrl(item.url)"
                  :alt="item.name"
                />
              </div>
              <div class="f14 mt10 tc">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="isShowFriendLink"
      style="min-height: 60px; width: 1200px; margin: 0 auto"
      class="friend-link-black flex-center-wrap flex-justify-between f14"
    >
      <div
        style="width: 1100px; line-height: 40px"
        :class="{ 'text-ess-1': !isShowAllLink }"
      >
        <span class="white bold">友情链接：</span>
        <a
          target="_blank"
          :href="parseFullPath(item.url)"
          :class="{ ml10: index == 0, ml20: index > 0 }"
          v-for="(item, index) in footerFriendLink"
          :key="index"
        >
          {{ item.name }}
        </a>
      </div>
      <span
        class="look-more"
        v-if="!isShowAllLink"
        @click="isShowAllLink = true"
      >
        更多&gt;
      </span>
    </div>
  </footer>
</template>
<script>
export default {
  name: 'zlFooter',
  // 数据
  data() {
    return {
      // 是否展示所有链接
      isShowAllLink: false
      // 是否展示友情链接
      // isShowFriendLink: false
    }
  },
  props: {
    isShowWhite: {
      type: Boolean,
      default: true
    }
  },
  // 计算属性
  computed: {
    isShowFriendLink() {
      // console.log(this.$route);
      // console.log(this.$route.path);
      // return this.$route.path === '/'
      return this.$route.path === '/'
    },
    // 底部数据
    footerEwms() {
      return this.decodeString(this.$store.state.footerEwms) || {}
    },
    // 底部导航
    footerNavs() {
      return this.decodeString(this.$store.state.footerNavs) || []
    },
    // 底部友情链接
    footerFriendLink() {
      return this.decodeString(this.$store.state.friendLink) || []
    }
  },
  mounted() {
    // 是否展示友情链接
    // this.isShowFriendLink = location.pathname === '/'
    this.setICPNumber()
  },
  // 方法
  methods: {},
  // 子组件
  components: {}
}
</script>
<!--当前页面的样式 -->
<style scoped>
.qrcode {
  margin-left: 20px;
}
.qrcode:first-of-type {
  margin-left: 0px;
}
.ml70 {
  margin-left: 70px;
}
/* .text-primary {
  color: #1a2840;
} */
/* . {
  color: #666666;
} */
/* .text-third {
  color: #999999;
} */
.footer {
  padding: 30px 0 0px;
  overflow: hidden;
  width: 100%;
  min-width: 1200px;
}

.friend-link-white {
  background-color: #fff;
  color: #999999 !important;
}
.friend-link-white .nav-title {
  color: #666666;
}
.friend-link-black {
  background-color: #3b3c3d;
  color: #999999;
}
.friend-link-black .nav-title {
  color: #ffffff;
}

.footer-inner {
  /* width: 1200px; */
  /* height: 255px; */
}
.web-logo-black {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 3.841% 2.681%;
  width: 116px;
  height: 34px;
}
.web-logo-white {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 56.466% 2.681%;
  width: 116px;
  height: 34px;
}
.slogan-black {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 85.027% 3.619%;
  width: 169px;
  height: 20px;
}
.slogan-white {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 28.571% 3.619%;
  width: 169px;
  height: 20px;
}
.line {
  width: 18px;
  height: 3px;
  background: #3480ff;
  border-radius: 2px;
}
a {
  text-decoration: none;
  color: inherit;
}
.qrcode-box {
  width: 110px;
  height: 110px;
  background: #ffffff;
  border-radius: 8px;
}
.qrcode-img {
  width: 100px;
  height: 100px;
}
.look-more {
  cursor: pointer;
}
.mt15 {
  margin-top: 15px;
}
.footer-register-info {
  word-break: break-all;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 16px;
}
.reg-item div {
  margin-top: 5px;
}
</style>
